<template>
  <main>
      <div class="box">
        <div class="inner-box">
          <formsWrap :style="formLeft"></formsWrap>

          <carousel :style="carouselLeft"></carousel>

        </div>
      </div>
    
  </main>

</template>

<script>
import formsWrap from './formsWrap.vue'
import carousel from './carousel.vue'

export default {
  name: 'Login',
  components: {
    formsWrap,
    carousel
  },
  data(){
    return {
      isSignUp: false,
      formLeft: {
        left: 0
      },
      carouselLeft: {
        left: '45%'
      }
    }
  },
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

:global(*){
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

main{
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: #2b343b;
  padding: 2rem;
  align-items: center;
  justify-content: center;
}

.box{
  position: relative;
  width: 100%;
  max-width: 1020px;
  height: 640px;
  background-color: #fff;
  border-radius: 3.3rem;
  box-shadow: 0 60px 40px -30px rgba(0, 0, 0, .27);
}

.inner-box{
  position: absolute;
  width: calc(100% - 4.1rem);
  height: calc(100% - 4.1rem);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>